import React, { Component } from 'react'
// 引入antd组件
import { Layout, Menu } from 'antd';
// 引入高阶组件
import { withRouter } from 'react-router'
import { connect } from "react-redux" 
// 引入导航栏数据
import menus from '../../router/menu'

//引入CSS
import './Dashboard.css'

const { Sider } = Layout;
const { SubMenu } = Menu;

class Sidermenu extends Component {
  render() {
    var pathname = this.props.location.pathname
    var OpenKeys = ["/"+pathname.split("/")[1]]  // 默认打开
    var SelectedKeys = [pathname]  // 默认高亮
    
    return (                                       
      <Sider trigger={null} collapsible collapsed={this.props.isCollapsed}>
          <div className="logo" />
          <Menu theme="dark" mode="inline" 
          defaultOpenKeys = {OpenKeys}
           // defaultSelectedKeys = {SelectedKeys}  只有组件第一次创建的时候会生效
          selectedKeys={SelectedKeys}
          onClick={this.handleClick}>
           {this.Renderitem(menus)}
          </Menu>
        </Sider>
    )
  }
  handleClick = (obj)=>{
    console.log(obj);
    this.props.history.push(obj.key)
    
  }
  Renderitem = (menus) =>{
    var roleType = JSON.parse(localStorage.getItem("users")).roleType 
    return menus.map(item =>{
      if(item.children){
        if(item.permission>roleType){
          return null
        }
        return(<SubMenu
        key={item.path}
        title={
          <span>
            <item.icon />
            <span>{item.title}</span>
          </span>
        }
        >
          {/* {递归} */}
          {
            this.Renderitem(item.children)
          }
        </SubMenu>)
      }else{
        if(item.permission>roleType){
          return null
        }
        return( <Menu.Item key={item.path}>
         <span>
           <item.icon />
           <span>{item.title}</span>
         </span>
        </Menu.Item>)
      }
    })
  }
}

const mapStateToProps = (state)=>{
  return {
    isCollapsed:state.isCollapsed   
  }
}
export default withRouter(connect(mapStateToProps)(Sidermenu))